<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Little Big City</title>
    <link rel="stylesheet" href="./css/main.css">
    <script>
        paceOptions = {
            ajax: true,
            document: true
        };
    </script>
    <script src="lib/pace.min.js"></script>
</head>
<body>
    <div id="viewport"></div>
    <div id="map">
        <h3>Pan the map to select a new area</h3>
        <div id="location">
            <label>LNG</label>
            <input id="lng" type="text" value="-74.0130345">
            <label>LAT</label>
            <input id="lat" type="text" value="40.7063516">
            <button id="reset">RESET</button>
            <button id="locate">GO</button>
        </div>
        <div id="map-main"></div>
    </div>
    <nav id="style-list">
        <ul>
            <li class="planet">
                <img src="asset/planet.jpg" alt="">
            </li>
            <li class="tile">
                <img src="asset/isometric.jpg" alt="">
            </li>
        </ul>
    </nav>
    <div id="credits">
        <a href="https://github.com/pissang/little-big-city" target="_blank" class="source">Source Code</a>
        Built on top of
            <a href="https://github.com/pissang/claygl" target="_blank">ClayGL</a> by
            <a href="https://twitter.com/pissang1" target="_blank">@pissang</a>
        <div class="data-source">
            Vector tile data is from <a target="_blank" href="https://developers.nextzen.org/about.html">nextzen</a>.
        </div>
    </div>
    <script src="lib/FileSaver.js"></script>
    <script src="./dist/bundle.js"></script>
</body>
</html>